<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Energy</title>
</head>
<wicket:extend>
<body>

  <!-- Sidebar -->

  <div style="position: relative; background-color: #2D475C; float:left; width: 200px; height: 600px;">
    <div style="padding-top: 10px; margin-left: auto; margin-right: auto; width: 176px;"> 
        <img wicket:id="sidebar" src="side-bar.png" border="0" />
    </div>
    <div style="position: absolute; bottom: 0; padding: 10px;">
      <img wicket:id="logo" src="logo.png"/>
    </div>
  </div>
  
  <!-- Energy Monitor -->

  <div class= "wrapper" style="position: absolute; top: 50; left: 200; height: 609px; width: 800px;">
      <img wicket:id="energy_monitor" width="804" height="435" border="0" usemap="#Map" />
      <map name="Map" id="Map">
        <area shape="rect" coords="662,8,792,148" wicket:id="ACPageLink" href="#" />
        <area shape="rect" coords="16,13,144,147" wicket:id="LightPageLink" href="#" />
        <area shape="rect" coords="659,289,793,420" wicket:id="SecurityPageLink" href="#" />
        <area shape="rect" coords="10,289,147,420" wicket:id="AquaponicsPageLink"href="#" />
      </map>
  </div>
</body>

</wicket:extend>
</html>
       